import React, { useState } from "react";

type Color = string;


const useRandomColor = (initColor: Color) => {
  console.log("initColor", initColor);
  const [color, setColor] = useState<string>(initColor);
  const handleRandom = () => {
    //随机颜色
    const randomColor = "#" + Math.random().toString(16).slice(2, 8);
    setColor(randomColor);
    setColor((pre)=>{return "#" + Math.random().toString(16).slice(2, 8)})
  };
  console.log("color", color);
  return { color2: color, handleRandom2: handleRandom };
};

function Com1() {

  const [color, setColor] = useState<string>('');



  const handleRandom = () => {
    //随机颜色
    const randomColor = "#" + Math.random().toString(16).slice(2, 8);
    setColor(randomColor);
    // setColor(prevColor:any => "#" + Math.random().toString(16).slice(2, 8))
  };

  // const [color, handleRandom] = useRandomColor("red");
  const { color2, handleRandom2 } = useRandomColor("red");


  const style = {
    backgroundColor: color as string,
    // backgroundColor: color2,
    padding: 50,
    textAlign: "center" as const,
    // textAlign: "center"
  }

  const style2 = {
    backgroundColor: color2 as string,
    // backgroundColor: color2,
    padding: 50,
    textAlign: "center" as const,
    // textAlign: "center"
  }
  return (
    <div>
      <div style={style}>
        <button onClick={() => { handleRandom() }}>点击换色</button>
      </div>
      <div
        style={style2}
      >
        <button onClick={handleRandom2}>点击换色</button>
      </div>
    </div>
  );
}

function Com2() {
  const { color2, handleRandom2 } = useRandomColor("red");
  const handleClick = () => {
    setInterval(handleRandom2, 1000);
  };


  const style = {
    backgroundColor: color2 as string,
    // backgroundColor: color,
    padding: 50,
    textAlign: "center" as const,
    // textAlign: "center"
  }
  return (
    <div style={style}>
      <button onClick={handleClick}>点击换色</button>
    </div>
  );
}

const R3 = function () {
  return (
    <div>
      <Com1 />
      <Com2 />
      <div>
        钩子是重用有状态逻辑的一种方式，而不是状态本身。
        事实上，每次调用Hook都有一个完全隔离的状态 -
        所以你甚至可以在一个组件中使用相同的自定义Hook两次。 custom
        hook更像是一种约定而非功能。如果函数的名称以use开头并且它调用其他Hook，我们说它是一个Custom
        Hook。useSomething命名约定是linter插件如何使用Hooks在代码中查找错误的。
      </div>
    </div>
  );
}


export default R3